<template>
  <div class="login_container">
    <div class="header">
      <div class="header_area">
        <div class="logo" />
        <div class="connect_us">
          <div class="tel_icon" />
          <div>联系我们：0757-2810 9365</div>
          <el-popover
            placement="bottom"
            trigger="hover"
          >
            <div style="height: 150px;width: 150px;">
              <img style="height: 150px;width: 150px;" src="../../assets/connect_us.jpg" alt="">
            </div>
            <div slot="reference" class="qr_icon" />
          </el-popover>
        </div>
      </div>
    </div>
    <div class="login_area">
      <div class="main_logo" />
      <div class="login">
        <div class="top">
          <div class="title">文储实训平台</div>
          <div class="line" />
        </div>
        <div class="form">
          <el-form ref="loginForm" label-position="top" :model="loginForm" :rules="rules" hide-required-asterisk>
            <!-- 商户号 -->
            <el-form-item prop="account" label="账号">
              <el-input ref="account" v-model="loginForm.account" placeholder="请输入您的账号" />
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="accountPwd" label="密码">
              <el-input
                ref="accountPwd"
                v-model="loginForm.accountPwd"
                placeholder="请输入您的密码"
                :type="password_type"
                @keyup.enter.native="submit"
              >
                <div slot="suffix" :class="password_type ? 'hide_pwd_icon' : 'show_pwd_icon'" @click="showPwd" />
              </el-input>
            </el-form-item>
            <el-form-item prop="checkCode" label="验证码">
              <el-input v-model="loginForm.checkCode" style="width: 260px" placeholder="请输入验证码" @keyup.enter.native="submit" />
              <img class="verification_img" :src="'data:image/png;base64,' + verify_url" @click="get_verification_code">
            </el-form-item>
          </el-form>
          <el-button class="submit_btn" type="primary" :disabled="loading" :loading="loading" @click="submit">
            立即登录
          </el-button>
          <div class="by_gdwc_technical_department">
            由广东文储区块链科技有限公司提供技术支持
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      Copyright © 2020 (filestorer.com) .All rights reserved 广东文储区块链科技有限公司版权所有 | <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备2022023534号-1</a>
    </div>
  </div>
</template>

<script>
import { verification_code } from '@/api/user'
export default {
  name: 'Login',
  data() {
    // const validateAccount = (rule, value, callback) => {
    //   if (!value) {
    //     return callback(new Error('账户不能为空'))
    //   } else {
    //     if (value.length < 4 || value.length > 10) {
    //       callback(new Error('账户长度不能少于4位，且不能超过10位'))
    //     } else {
    //       if (!/^[0-9]*$/g.test(value)) {
    //         callback(new Error('商户号只能包含数字'))
    //       }
    //     }
    //     callback()
    //   }
    // }
    const validatePassword = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('密码不能为空'))
      } else {
        if (value.length < 8 || value.length > 16) {
          callback(new Error('密码长度不能少于8位，且不能超过16位'))
        } else {
          if (!/[a-zA-Z]+(?=\d+)|\d+(?=[a-zA-Z]+)/g.test(value)) {
            callback(new Error('密码必须同时包含字母、数字'))
          }
          callback()
        }
      }
    }
    // 这里存放数据
    return {
      loading: false,
      loginForm: {
        account: '',
        accountPwd: '',
        checkCode: ''
      },
      rules: {
        account: { required: true, message: '请输入账号', trigger: 'blur' },
        accountPwd: [{ validator: validatePassword, trigger: 'blur' }],
        checkCode: { required: true, message: '请输入验证码', trigger: 'blur' }
      },
      password_type: 'password',
      verify_url: '',
      token: ''
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: { },
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.get_verification_code()
  },
  // 生命周期 - keep-alive
  async activated() {},
  // 方法集合
  methods: {
    submit() {
      // setToken(this.token)
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true
          this.$store
            .dispatch('user/login', this.loginForm)
            .then((res) => {
              // this.saveSession()
              // if (res.code === 4005) {
              //   this.safetyVerification_visible = true
              //   return
              // }
              this.$router.push({ path: this.redirect || '/' })
              setTimeout(() => {
                this.loading = false
              }, 5 * 1000)
            })
            .catch((err) => {
              console.error(err)
              this.get_verification_code()
              this.$store.dispatch('user/resetToken')
              this.loading = false
            })
        } else {
          return false
        }
      })
    },
    showPwd() {
      if (this.password_type === 'password') {
        this.password_type = ''
      } else {
        this.password_type = 'password'
      }
      this.$nextTick(() => {
        this.$refs.accountPwd.focus()
      })
    },
    async get_verification_code() {
      try {
        const result = await verification_code()
        const data = result.data
        const { base64Image, token } = data
        this.verify_url = base64Image
        this.loginForm.token = token
      } catch (error) {
        console.error(error)
      }
    },
    close() {
      this.$refs.fileNameForm.resetFields()
      this.$emit('close')
    }
  },
  // 进入页面前
  beforeRouteEnter(to, from, next) {
    next((vm) => {})
  },
  // 离开页面前
  beforeRouteLeave(to, from, next) {
    next()
  }
}
</script>
<style lang="scss" scoped>
.login_container {
    background-image: url('../../assets/login/login_bg2.png');
		background-size: cover;
		background-repeat: no-repeat;
		position: relative;
		width: 100%;
		height: 100vh;
    margin: 0 auto;
    overflow: hidden;
    min-width: 1460px;
    min-height: 800px;
	.header {
    width: 100%;
		height: 70px;
		background: #2C2C2C;
		box-shadow: 0px 6px 24px 0px rgba(71, 73, 150, 0.04);
		padding: 18px 0;
    .header_area{
      padding: 0 15.6%;
      display: flex;
      justify-content: space-between;
      .logo {
        width: 139px;
        height: 36px;
        background-image: url('../../assets/logo/wenchu_edu2.png');
        background-size: 100%;
      }
      .connect_us {
        height: 34px;
        font-size: 14px;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
        color: #FFFFFF;
        display: flex;
        justify-content: space-between;
        line-height: 34px;
        align-items: center;
        .tel_icon {
          width: 12px;
          height: 12px;
          background-image: url('../../assets/login/tel_icon.png');
          background-size: 100%;
          margin-right: 5px;
        }
        .qr_icon {
          width: 24px;
          height: 25px;
          background-image: url('../../assets/login/qr_icon.png');
          background-size: 100%;
          margin-left: 32px;
          cursor: pointer;
          display: block;
        }
      }
    }
	}
  .login_area {
    width: 1600px;
    height: 772px;
    margin: 0 auto;
    display: flex;
    // flex-direction: column;
    // align-items: flex-end;
    padding-top: 150px;
    .main_logo{
      width: 772px;
      height: 596px;
      background: url('../../assets/login/main_logo.png');
      background-size: 100%;
      margin-right: 250px;
    }
    .login {
		width: 460px;
		height: 540px;
		background: #FFFFFF;
		box-shadow: 0px 0px 30px 0px rgba(104, 104, 104, 0.09);
		border-radius: 16px;
		padding: 30px 50px;
    // margin-left: 100px;
		.top {
			height: 44px;
			.title {
				height: 24px;
				text-align: center;
				font-size: 24px;
				font-family: SourceHanSansCN-Bold, SourceHanSansCN;
				font-weight: bold;
				color: #2C2C2C;
				line-height: 24px;
				letter-spacing: 4px;
			}
			.line {
				width: 100%;
				height: 2px;
				background-image: url('../../assets/login/black_line.png');
				background-size: 100%;
				margin-top: 19px;
			}
		}
		.form {
			margin-top: 40px;
			.submit_btn {
				width: 360px;
				height: 44px;
				background: $MainColor;
				border-radius: 22px;
				margin-top: 20px;
			}
			.by_gdwc_technical_department{
				text-align: center;
				height: 14px;
				font-size: 14px;
				font-family: SourceHanSansCN-Regular, SourceHanSansCN;
				font-weight: 400;
				color: #434343;
				line-height: 14px;
				letter-spacing: 1px;
				margin-top: 35px;
			}
		}
	}
  }
}

 .footer{
		width: 100%;
		text-align: center;
		height: 12px;
		font-size: 12px;
		font-family: SourceHanSansCN-Regular, SourceHanSansCN;
		font-weight: 400;
		color: #8C8C8C;
		line-height: 12px;
		// position: absolute;
		// bottom: 20px;
    padding-top: calc(100vh - 880px);
    margin: 10px 0;
	}

.show_pwd_icon {
	width: 16px;
	height: 14px;
	background: url('../../assets/login/show_pwd.png');
	background-size: 100%;
	margin-right: 10px;
	margin-top: 12px;
	cursor: pointer;
}

.hide_pwd_icon {
	width: 16px;
	height: 8px;
	background: url('../../assets/login/hide_pwd.png');
	background-size: 100%;
	margin-right: 10px;
	margin-top: 17px;
	cursor: pointer;
}

.verification_img {
	width: 80px;
	height: 40px;
	background: #F0F0F0;
	border-radius: 4px;
	margin-left: 20px;
	cursor: pointer;
}

::v-deep .el-form-item__label {
	line-height: 30px;
}

::v-deep .el-input--suffix .el-input__inner {
	padding-right: 40px;
}

::v-deep .el-form--label-top .el-form-item__label{
	padding: 0;
}

::v-deep .el-form-item__content{
	display: flex;
}
</style>
